<script lang="ts" setup>
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

// 引入库存
import { useLoginStore } from '@/stores/login/loginStore'
// 创建库存实例
const loginStore = useLoginStore();

const ruleFormRef = ref<FormInstance>()



const validateUsername = (rule: any, value: any, callback: any) => {
    const { username } = loginStore.registerData
    if (!username) {
        callback(new Error('用户名不能为空'))
    } else if (username.length < 3) {
        callback(new Error('用户名长度不能小于3'))
    } else if (username.length > 10) {
        callback(new Error('用户名长度不能大于10'))
    } else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
        callback(new Error('用户名只能包含字母、数字、下划线'))
    } else {
        callback()
    }

}

const validatePassword = (rule: any, value: any, callback: any) => {
    const { password } = loginStore.registerData
    if (password === '') {
        callback(new Error('密码不能为空'))
    } else if (password.length < 6) {
        callback(new Error('密码长度不能小于6'))
    } else if (password.length > 20) {
        callback(new Error('密码长度不能大于20'))
    } // 要求密码要有数字、小写字母、大写字母、特殊字符四种中的至少三种
    else if (!/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![\W_]+$)\S{6,20}$/.test(password)) {
        callback(new Error('密码要求至少包含数字、小写字母、大写字母、特殊字符中的三种'))
    }
    else {
        callback()
    }
}
const validateConfirmPassword = (rule: any, value: any, callback: any) => {
    const { confirmPassword } = loginStore.registerData
    // 判断两次密码是否一致
    if (confirmPassword === '') {
        callback(new Error('请再次输入密码'))
    } else if (confirmPassword !== loginStore.registerData.password) {
        callback(new Error("两次输入的密码不一致"))
    } else {
        callback()
    }
}

const rules = reactive<FormRules<typeof loginStore.registerData>>({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }],
    confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!');
            
        } else {
            console.log('error submit!')
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<template>

    <div class="form">
        <!-- 注册表单 -->
        <el-form ref="ruleFormRef" size="large" autocomplete="off" :rules="rules" :model="loginStore.registerData">
            <el-form-item>
                <h1 class="title">注册</h1>
            </el-form-item>
            <el-form-item prop="username">
                <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="loginStore.registerData.username" clearable
                    autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"
                    v-model="loginStore.registerData.password" show-password clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
                <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"
                    v-model="loginStore.registerData.confirmPassword" show-password clearable
                    autocomplete="off"></el-input>
            </el-form-item>
            <!-- 注册按钮 -->
            <el-form-item>
                <el-button class="button" type="primary" auto-insert-space @click="submitForm(ruleFormRef)">
                    注册
                </el-button> <br>
                <el-button class="button" @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
            <el-form-item class="flex">
                <el-link type="info" :underline="false" @click="loginStore.toLogin">
                    ← 返回
                </el-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>
.form {
    background-color: rgba(255, 255, 255, 0.8);
    /* Form background semi-transparent */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
    max-width: 400px;
    /* 限制表单的最大宽度 */
    margin: 0 auto;
    /* 居中表单 */

    .title {
        margin: 0 auto;
    }

    .button {
        width: 100%;
        margin: 2% 0;
    }

    .flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}
</style>